<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="商品信息" name="first">
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">商品名称:</span>
          <el-input v-model="name_value" class="flex-1" />
        </div>
        <div class="m-20-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">关键词:</span>
            <el-input v-model="keyword_value" class="flex-1" />
          </div>
          <div class="annotation m-10-t m-114-l">
            <span>每个关键词最长为15个字符，必须以","(逗号)分隔符</span>
          </div>
        </div>
        <div class="app-row m-30-t">
          <span class="title bold width-100 align-right">所属门店:</span>
          <el-select v-model="shop_value" class="flex-1" placeholder="请选择" @change="choose_shop">
            <el-option
              v-for="item in shop_list"
              :key="item.id"
              :value="item.id"
              :label="item.true_name"
            />
          </el-select>
        </div>

        <!-- <el-button type="primary" class="m-114-l m-10-t">添加机构</el-button> -->
        <div class="app-row m-50-t">
          <span class="title bold width-100 align-right">所属分类:</span>
          <el-button icon="el-icon-menu" type="success" @click="setting_classify">设置分类</el-button>
          <el-button icon="el-icon-plus" type="warning">添加新分类</el-button>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">是否上架:</span>
            <el-radio v-model="putaway_radio" :label="0">是</el-radio>
            <el-radio v-model="putaway_radio" :label="2">否</el-radio>
          </div>
          <div class="annotation m-10-t m-114-l">
            <span>只有上架的商品才会在前台显示出来，客户是无法看到下架商品</span>
          </div>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-140 align-right">商品销售类型:</span>
            <el-radio v-model="point_category_radio" label="default">非积分商品</el-radio>
            <el-radio v-model="point_category_radio" label="code">商品赠送积分</el-radio>
            <el-radio v-model="point_category_radio" label="costpoint">积分兑换商品</el-radio>
          </div>

        </div>
        <div v-if="point_category_radio!='default'" class="flex m-50-t a-i-c">
          <span class="title bold width-100 align-right">{{ point_category_radio == "code" ?'赠送': point_category_radio == "costpoint"?'抵扣':'' }}积分:</span>
          <div>
            <el-input v-model="good_point" class="width-150" type="number" />
          </div>
        </div>
        <div class="annotation m-30-t m-114-l">
          <span>选择商品是否为积分商品，并设置积分</span>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">商品规格:</span>
            <div
              v-for="(item, index) in specification_list"
              :key="item.index"
              class="item-specification"
              @click="specification_delete(index)"
            >
              {{ item.name }}</div>
            <el-button type="primary" class="m-50-l" @click="specification_add">添加规格</el-button>
          </div>
        </div>
        <!-- <div class="m-50-t">
          <div class='app-row'>
            <span class="title bold width-100 align-right">是否共享:</span>
            <el-radio v-model="share_radio" label="1">是</el-radio>
            <el-radio v-model="share_radio" label="2">否</el-radio>
          </div>
          <div class='annotation m-10-t m-114-l'>
            <span>商城平台的商品可以被商家复制共享</span>
          </div>
        </div> -->
        <div class="m-50-t">
          <div class="flex">
            <span class="title bold width-100 align-right">分销设置:</span>
            <div class="">
              <div class="app-row">
                <el-radio v-model="distribution_radio" label="1">无</el-radio>
                <el-radio v-model="distribution_radio" label="2">比率</el-radio>
                <el-radio v-model="distribution_radio" label="3">固定值</el-radio>
              </div>
              <div v-if="distribution_radio!='1'" class="m-30-t">
                <div class="flex a-i-c">
                  <span class="width-150">一级分类：</span>
                  <el-input v-model="distribution_first_class" />
                </div>
                <div class="flex a-i-c m-20-t">
                  <span class="width-150">二级分类：</span>
                  <el-input v-model="distribution_second_class" />
                </div>
                <div class="flex a-i-c m-20-t">
                  <span class="width-150">三级分类：</span>
                  <el-input v-model="distribution_third_class" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="m-50-t">
          <div class="app-row">
            <span class="title bold width-100 align-right">首页显示:</span>
            <el-radio v-model="index_radio" :label="0">否</el-radio>
            <el-radio v-model="index_radio" :label="1">是</el-radio>
          </div>

        </div>

        <div class="m-50-t">
          <div class="flex">
            <span class="title bold width-100 align-right">配送设置:</span>
            <div>
              <el-radio v-model="freight_radio" label="1">无</el-radio>
              <el-radio v-model="freight_radio" label="2">比率</el-radio>
              <el-radio v-model="freight_radio" label="3">固定值</el-radio>
              <div v-if="freight_radio!=1" class="flex a-i-c m-30-t">
                <span class="width-150">配送价格：</span>
                <el-input v-model="delivery_price" />
              </div>
            </div>
          </div>
          <!-- <div class='annotation m-10-t m-114-l'>
            <span>是否免运费</span>
          </div> -->
        </div>

        <!-- <div class='flex m-50-t'>
          <span class="title bold width-100 align-right">附属数据:</span>
          <el-row :gutter="20" class="flex-1">
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加积分</div>
              <el-input class="m-20-t" v-model="score_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">排序</div>
              <el-input class="m-20-t" v-model="sort_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">计件单位显示</div>
              <el-input class="m-20-t" v-model="unit_value"></el-input>
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">购买成功增加经验值</div>
              <el-input class="m-20-t" v-model="exp_value"></el-input>
            </el-col>
          </el-row>
        </div> -->
        <div class="flex m-50-t">
          <span class="title bold width-100 align-right">基本数据:</span>
          <el-row class="flex-1">
            <el-col :span="5">
              <div style="margin-left: 15px;">商品编号</div>
              <el-input v-model="num_value" class="m-20-t" style="width: 150px" />
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">库存</div>
              <el-input v-model="storage_value" class="m-20-t" style="width: 100px" />
            </el-col>
            <el-col :span="4">
              <div style="margin-left: 15px;">市场价格</div>
              <el-input v-model="market_value" class="m-20-t" style="width: 150px" type="number" />
            </el-col>
            <el-col :span="6">
              <div style="margin-left: 15px;">销售价格</div>
              <el-input v-model="sale_value" class="m-20-t" style="width: 150px" type="number" />
              <el-button type="danger" icon="el-icon-user" class="m-10-l" @click="show_vip_dialog">会员价格</el-button>
            </el-col>
            <el-col :span="3">
              <div style="margin-left: 15px;">成本价格</div>
              <el-input v-model="cost_value" class="m-20-t" style="width: 150px" type="number" />
            </el-col>
          </el-row>
        </div>

        <!-- <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品模型:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择模型"></el-select>
        </div> -->
        <!-- <div class='annotation m-10-t m-114-l'>
          <span>可以加入商品扩展属性，比如：型号，年代，款式..</span>
        </div>
        <div class='app-row m-50-t'>
          <span class="title bold width-100 align-right">商品推荐:</span>
          <el-checkbox-group v-model="recommend_list">
            <el-checkbox label="最新商品"></el-checkbox>
            <el-checkbox label="特价商品"></el-checkbox>
            <el-checkbox label="热卖商品 "></el-checkbox>
            <el-checkbox label="推荐商品" ></el-checkbox>
          </el-checkbox-group>
        </div> -->
        <!-- <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">商品品牌:</span>
          <el-select class='flex-1' v-model="orz_value" placeholder="请选择品牌"></el-select>
        </div> -->
        <div class="app-row m-30-t">
          <span class="title bold width-100 align-right">商品相册:</span>
          <el-upload
            class="upload-demo"
            :action="save_file_url"
            :on-preview="open_preview"
            :on-remove="handle_remove"
            :file-list="file_list"
            :on-success="get_img_id"
            list-type="picture-card"
            multiple
          >
            <i class="el-icon-plus" />
            <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
          </el-upload>
        </div>
        <div class="annotation m-10-t m-114-l">
          <span>第一张图片为缩略图,其它图片为轮播图,建议像素750*750,可拖拽使其改变顺序，最多支持上传9张</span>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label='课节信息' name="second">
        <div class='app-row m-20-t'>
          <span class="title bold width-100 align-right">课节总数:</span>
          <span>{{product_total}}</span>
          <el-button class='m-50-l' type='primary' @click="add_product_button">添加课节</el-button>
          <el-button class="m-20-l" type="danger">删除课节</el-button>
        </div>
        <div class='app-row m-30-t'>
          <span class="title bold width-100 align-right">课节列表:</span>
          <el-select class='flex-1'
            v-model="product_value"
            placeholder="请选择课节"
            @change="choose_product"
            >
            <el-option
              v-for="item in product_list"
              :key="item.id"
              :value="item"
              :label="item.name">
            </el-option>
          </el-select>
        </div>
        <div class='flex m-50-t'>
          <span class="title bold width-100 align-right">课节详情:</span>
          <el-row class="flex-1">
            <el-col :span="12">
              <div style="margin-left: 15px;">课节名称</div>
              <el-input class="m-20-t" v-model="product_name_value" style="width: 300px"></el-input>
            </el-col>
            <el-col :span="12">
                <div style="margin-left: 15px;">课节编号</div>
                <el-input class="m-20-t" v-model="product_no_value"  style="width: 300px"></el-input>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="描述" name="third">
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150 ">商品详情文字:</span>
          <el-input v-model="text_detail" type="textarea" class="m-50-l flex-1" :rows="4" placeholder="请输入内容" />
        </div>
        <div class="app-row m-30-t">
          <span class="title bold align-right width-150">商品详情图片:</span>
          <!-- 关于商品详情图运作流程
          1.上传图片,on-success,调用get_img_id_detail函数；
            删除图片,on-remove,调用handle_remove_detail函数，在handle_remove_detail函数内部，继续也调用get_img_id_detail函数
           （调用get_img_id_detail）
          2. 通过get_img_id_detail函数，输出一个数组，该数组是所有图片id的集合
            （返回得到 img_id_list_detail 数组）
          3.  提交修改，触发edit_button函数
          4. 调用 get_img_url_list_detail函数，对img_id_list_detail数组进行处理，返回一个数组，该数组是所有图片url的集合
            (返回得到 img_url_list_detail 数组)
          5. 调用clear_last_comma函数，针对img_url_list_detail数组进行处理，输入img_url_list_detail,输出img_url_list_detail
          6. img_url_list_detail作为参数进行请求，调用update
           -->
          <el-upload
            class="upload-demo"
            :action="save_file_url_detail"
            :on-preview="open_preview"
            :on-remove="handle_remove_detail"
            :file-list="file_list_detail"
            :on-success="get_img_id_detail"
            list-type="picture-card"
            multiple
          >
            <i class="el-icon-plus" />
          </el-upload>
        </div>
      </el-tab-pane>
      <el-tab-pane label="营销选项" name="fourth">
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">SEO关键词:</span>
          <el-input class="flex-1" />
        </div>
        <div class="app-row m-20-t">
          <span class="title bold width-100 align-right">SEO描述:</span>
          <el-input class="flex-1" type="textarea" :rows="2" />
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="app-row j-c-c m-100-t">
      <el-button type="success" @click="edit_button">确认修改</el-button>
    </div>
    <div style="height: 500px" />
    <el-dialog
      title="选择分类"
      :visible.sync="dialog_visible"
      width="50%"
    >
      <div class="category-container">
        <div
          v-for="(item) in goods_category_list"
          :key="item.index"
          class="category-item"
          :data-id="item.id"
          :class="[chosen_category_id.indexOf(item.id) >= 0 ?'chosen-category-item':'']"
          @click="changing_category"
        >
          {{ item.name }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="dialog_visible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加规格"
      :visible.sync="if_show_specification_box"
    >
      <div class="flex m-30-t a-i-c">
        <div class="width-100">规格名称:</div>
        <el-input v-model="specification_name" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">销售价格</div>
        <el-input v-model="specification_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">市场价格</div>
        <el-input v-model="specification_market_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">成本价格</div>
        <el-input v-model="specification_cost_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">库存</div>
        <el-input v-model="specification_store_nums" class="width-100 m-30-l" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="if_show_specification_box = false">取 消</el-button>
        <el-button type="primary" @click="confirm_specification_add">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="会员价格"
      :visible.sync="if_show_vip_dialog"
    >
      <div class="flex m-30-t a-i-c">
        <div class="width-100">钻石会员价格：</div>
        <el-input v-model="group1_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">铂金会员价格：</div>
        <el-input v-model="group2_sell_price" class="width-100 m-30-l" />
      </div>
      <div class="flex m-30-t a-i-c">
        <div class="width-100">黄金会员价格：</div>
        <el-input v-model="group3_sell_price" class="width-100 m-30-l" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="if_show_vip_dialog = false">取 消</el-button>
        <el-button type="primary" @click="if_show_vip_dialog = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="if_open_preview_dialog"
      width="30%"
    >
      <img width="100%" :src="target_image_preview_url" alt="">
    </el-dialog>
  </div>
</template>

<script>
import goods_category_request from '@/api/goods_category_request'
import goods_request from '@/api/goods_request'
import product_request from '@/api/product_request'
import host_one from '@/api/host/host'
import editor from '@/components/kindeditor/index.vue'
import shop_request from '@/api/shop_request'
import host_go_one from '@/api/host/host_go'
export default {
  name: 'GoodsEdit',
  components: {
    editor
  },
  data() {
    return {
      counts: 0,
      is_delete: false,
      dialog_visible: false,
      activeName: 'first',
      name_value: '',
      goods_category_list: [],
      putaway_radio: 0,
      point_category_radio: 'default',
      share_radio: '2',
      freight_radio: '2',
      score_value: 0,
      num_value: 'SD8361255',
      storage_value: 100,
      market_value: '',
      text_detail: '',
      sale_value: 0,
      cost_value: '',
      orz_value: '',
      sort_value: 99,
      unit_value: '堂',
      exp_value: 0,
      recommend_list: [],
      editorText: '', // 双向同步的变量
      editorTextCopy: '', // content-change 事件回掉改变的对象
      detail_data: {},
      product_value: '',
      product_list: [],
      product_name_value: '',
      product_total: '',
      product_no_value: '',
      chosen_category_id: [],
      img_id_list: [],
      img_url_list_detail: '', // 对img_id_list_detail数组里的图片地址进行处理，得到一个用逗号拼接而成的包含所有图片地址的字符串
      img_id_list_detail: [], // 调取uploadfile后，返回的包含图片地址的数组
      photo_list: [],
      specification_list: [],
      if_show_specification_box: false,
      specification_name: '',
      specification_sell_price: 0,
      specification_market_price: 0,
      specification_cost_price: 0,
      specification_store_nums: 0,
      if_show_vip_dialog: false,
      group1_sell_price: 0,
      group2_sell_price: 0,
      group3_sell_price: 0,
      // group1_share_price: 0,
      // group2_share_price: 0,
      // group3_share_price: 0,
      keyword_value: '',
      distribution_radio: '1',
      distribution_first_class: '',
      distribution_second_class: '',
      distribution_third_class: '',
      delivery_price: '',
      if_open_preview_dialog: false,
      target_image_preview_url: [],
      good_point: 0,
      file_list_detail: [],
      file_list: [],
      shop_list: [],
      shop_value: '',
      shop_id: 0,
      index_radio: 0
    }
  },
  created() {
    this.get_goods_category()
    this.get_product_list(this.$route.query.gid)
    this.get_detail(this.$route.query.id)
    this.save_file_url = host_one + '/savefile'
    this.save_file_url_detail = host_one + '/savefile'
    this.get_shop_list()
  },
  mounted() {
  },
  methods: {
    choose_shop(e) {
      this.shop_id = e
    },
    get_shop_list() {
      this.listLoading = true
      const params = {
        pageSize: 100,
        page: 1
        // name: this.keyword
      }
      shop_request.shop_list(params, res => {
        this.listLoading = false,
        this.shop_list = res.data
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    specification_add() {
      this.if_show_specification_box = true
    },
    specification_delete(index) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.specification_list.splice(index, 1)
      }).catch(err => err)
    },
    confirm_specification_add() {
      const specification = {
        name: this.specification_name,
        sell_price: this.specification_sell_price,
        market_price: this.specification_market_price,
        cost_price: this.specification_cost_price,
        store_nums: this.specification_store_nums
      }
      // let specification_list = this.specification_list
      // specification_list.push(specification)
      // this.specification_list = specification_list
      this.specification_list.push(specification)
      this.if_show_specification_box = false
    },
    open_preview(file) {
      this.if_open_preview_dialog = true
      this.target_image_preview_url = file.url
    },
    handle_remove(file, file_list) {
      this.get_img_id('', file, file_list)
    },

    setting_classify() {
      this.dialog_visible = true
    },
    changing_category(e) {
      const id = Number(e.target.dataset.id)
      const chosen_category_id = this.chosen_category_id
      const index_id = chosen_category_id.indexOf(id)
      if (index_id >= 0) {
        chosen_category_id.splice(index_id, 1)
      } else {
        chosen_category_id.push(id)
      }
    },
    get_goods_category() {
      this.listLoading = true
      const params = {
        pageSize: 100,
        page1: 1
      }
      goods_category_request.goods_category_list(params, res => {
        this.listLoading = false,
          this.goods_category_list = res.data
      })
    },
    // 关于商品详情图运作流程
    //  1. 调用get_detail，获取商品之前拥有的图片数据
    //  2. 调用init_file_list_detail, 输入通过get_detail函数获取的数据（字符串，里面是所有图片的Url地址，用','分隔开），返回一个数组，包含url地址
    //  3.调用delete_shop_str函数，针对数组进行处理，删除'/data/'，返回所需要的数组
    //  4. 通过get_file_list_detail函数，针对数组数据进行处理，返回一个，file_list_detail数组对象，这个数组对象可以被el-upload组件进行解析，从而显示在页面上
    //  1.上传图片,on-success,调用get_img_id_detail函数；
    //    删除图片,on-remove,调用handle_remove_detail函数，在handle_remove_detail函数内部，继续也调用get_img_id_detail函数
    //   （调用get_img_id_detail）
    //  2. 通过get_img_id_detail函数，输出一个数组，该数组是通过el-uplooad组件返回的一个对象数组，在对象的response里包含所有图片的id和url
    //    （返回得到 img_id_list_detail 数组）
    //  3.  提交修改，触发edit_button函数
    //  4. 调用 get_img_url_list_detail函数，对img_id_list_detail数组进行处理，返回一个字符串，该字符串是所有图片url，用逗号进行分隔
    //    (返回得到 img_url_list_detail 数组)
    //  5. 调用clear_last_comma函数，针对img_url_list_detail数组进行处理，输入img_url_list_detail,输出img_url_list_detail
    //  6. img_url_list_detail作为参数进行请求，调用update
    init_file_list_detail(image_str_url) {
      let image_str_url_list = image_str_url == '' ? [] : image_str_url.split(',')
      image_str_url_list = this.delete_shop_str(image_str_url_list)
      this.get_file_list_detail(image_str_url_list)
    },
    delete_shop_str(image_str_url_list) {
      for (let i = 0; i < image_str_url_list.length; i++) {
        image_str_url_list[i] = image_str_url_list[i].replace('/data/', '/')
      }
      return image_str_url_list
    },
    get_file_list_detail(image_str_url_list) {
      const file_list_detail = []
      for (let i = 0; i < image_str_url_list.length; i++) {
        file_list_detail.push({ url: 'http://img.gangjinhui.cn/' + image_str_url_list[i],
          response: { data: { url: image_str_url_list[i] }}
        })
      }
      this.file_list_detail = file_list_detail
      this.img_id_list_detail = file_list_detail
    },
    // remove后调用的函数
    handle_remove_detail(file, file_list_detail) {
      console.log(file_list_detail)
      this.get_img_id_detail('', file, file_list_detail)
    },
    // 添加或者删除图片后，调用的函数
    get_img_id_detail(res, file, file_list_detail) {
      this.img_id_list_detail = file_list_detail
    },
    // 对图片原始数组进行处理，转化成url数组
    get_img_url_list_detail() {
      // let img_url_list_detail = this.img_url_list_detail==''? this.img_url_list_detail: this.img_url_list_detail + ','
      let img_url_list_detail = ''
      for (const i of this.img_id_list_detail) {
        img_url_list_detail += i.response.data.url + ','
      }
      return this.clear_last_comma(img_url_list_detail)
    },
    clear_last_comma(img_url_list_detail) {
      while (img_url_list_detail.substr(img_url_list_detail.length - 1, 1) == ',') {
        img_url_list_detail = img_url_list_detail.substr(0, img_url_list_detail.length - 1)
      }
      return img_url_list_detail
    },
    // 商品相册相关函数
    init_file_list(photo_list) {
      const file_list = []
      for (let i = 0; i < photo_list.length; i++) {
        file_list.push({ url: photo_list[i].img, response: { data: { id: photo_list[i].id }}})
      }
      this.file_list = file_list
      this.img_id_list = file_list
    },
    get_img_id(res, file, file_list) {
      this.img_id_list = file_list
    },
    get_photo_id_list() {
      const photo_id_list = []
      for (const i of this.img_id_list) {
        photo_id_list.push(i.response.data.id)
      }
      return photo_id_list
    },
    confirm_button() {
      this.counts = 0
      this.dialog_visible = false
      // let params = {
      //   id: this.target_id,
      //   title: this.name
      // }
      // if (this.isEdit) {
      //   goods_category_request.edit_goods_category(params, res=> {
      //     console.log(res, this.name)
      //     this.dialog_visible = false
      //     this.get_list()
      //   })
      // }
      // else {
      //   goods_category_request.add_goods_category({}, res=> {
      //     this.dialog_visible = false
      //     this.get_list()
      //   })
      // }
    },
    show_vip_dialog() {
      this.if_show_vip_dialog = true
    },
    add_product_button_dialog() {
      this.counts += 1
    },
    choose_product(item) {
      product_request.detail_product({ id: item.id }, res => {
        this.product_name_value = item.name
        this.product_no_value = item.products_no
      })
    },
    handleClick(tab, event) {
    },
    onContentChange(val) {
      this.editorTextCopy = val
      console.log(val)
    },
    afterChange() {
    },
    add_product_button() {
      this.dialog_visible = true
    },

    edit_button() {
      if (this.name_value == '') {
        this.$message.error('请输入商品名称')
        return
      }
      if (this.market_value == '') {
        this.$message.error('请输入商品市场价格')
        return
      }

      const params = {
        id: this.$route.query.id,
        name: this.name_value,
        sell_price: this.sale_value,
        market_price: this.market_value,
        category: this.chosen_category_id,
        photo: this.get_photo_id_list(),
        goods_content: this.get_img_url_list_detail(),
        description: this.text_detail,
        product: this.specification_list,
        store_nums: this.storage_value,
        group1_price: this.group1_sell_price,
        group2_price: this.group2_sell_price,
        group3_price: this.group3_sell_price,
        share_type: this.distribution_radio,
        share1_price: this.distribution_first_class,
        share2_price: this.distribution_second_class,
        share3_price: this.distribution_third_class,
        is_del: this.putaway_radio,
        cost_price: this.cost_value,
        seller_id: this.shop_id,
        point: parseInt(this.good_point),
        type: this.point_category_radio,
        is_share: this.index_radio
      }
      console.log(params)
      goods_request.edit_goods(params, res => {
        this.$router.push('/academic/goods')
      })
    },

    get_detail(id) {
      goods_request.detail_goods({ id }, res => {
        const result = res.data
        this.name_value = result.name
        this.market_value = result.market_price
        this.sale_value = result.sell_price
        this.chosen_category_id = result.category
        this.text_detail = result.description
        this.img_url_list_detail = result.content
        this.storage_value = result.store_nums
        this.specification_list = result.product ? result.product : []
        this.group1_sell_price = result.ext_config.group1_price
        this.group2_sell_price = result.ext_config.group2_price
        this.group3_sell_price = result.ext_config.group3_price
        this.distribution_first_class = result.ext_config.share1_price
        this.distribution_second_class = result.ext_config.share2_price
        this.distribution_third_class = result.ext_config.share3_price
        this.distribution_radio = result.ext_config.share_type
        this.putaway_radio = result.is_del
        this.good_point = result.point
        this.cost_value = result.cost_price
        this.init_file_list(result.photo)
        this.init_file_list_detail(result.content)
        this.shop_id = result.seller_id
        this.get_shop_value(result.seller_id)
        this.point_category_radio = result.type
        this.index_radio = result.is_share
      })
    },
    get_shop_value(id) {
      const shop_params = {
        id
      }
      if (id != 0) {
        shop_request.detail_shop(shop_params, res => {
          const result = res.data
          this.shop_value = result.true_name
        })
      }
    },
    get_product_list(gid) {
      product_request.product_list({ gid }, res => {
        this.product_list = res.data
        this.get_product_total(gid)
      })
    },

    get_product_total(gid) {
      product_request.product_list({ pageSize: 10000000000, gid }, res => {
        if (res.code == 0) {
          this.product_total = res.data.length
        }
      })
    }
  }
}
</script>

<style scoped>
@import "~@/styles/layout.scss";

.category-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 100%;
  overflow: auto;
}
.category-item {
  margin-top: 30px;
  width: 200px;
  margin-left: 30px;
  border: 1px solid rgb(199, 199, 199);
  text-align:center;
  padding: 10px 10px;
  /* display: flex;
  flex-direction: row; */
}
.category-item:hover {
  background-color: yellow;
  cursor: pointer;
}

.chosen-category-item {
  background-color: yellow;
}

.item-specification {
  margin-left: 20px;
  padding: 10px 20px;
  background-color: rgb(35, 174, 216);
  color: aliceblue;
  border-radius: 30px;

}

</style>
